<!-- 侧边栏 -->
<template>
  <div class="aside">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>-->
    <el-menu :default-active="default_active"
             :default-openeds="default_array"
             class="aside_content"
             :style="{height:screenHeight}"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#409EFF"
             @open="handleOpen"
             @close="handleClose"
             @select="handleSelect"
             :collapse="isCollapse">
      <!-- 渲染父级路由 -->
      <div class="aside_box"
           v-for="(item, key) in list"
           :key="key">
        <el-submenu :index="item.path"
                    v-if="'children' in item === true">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span v-if="!isCollapse"
                  slot="title"
                  class="first_title">{{item.name}}</span>
          </template>
          <!-- 渲染子级路由 -->
          <div class="aside_children"
               v-for="(val, key) in item.children"
               :key="key">
            <el-submenu :index="val.path"
                        v-if="'children' in val === true">
              <span slot="title"
                    class="second_title">{{val.name}}</span>
              <el-menu-item v-for="(val2, key) in val.children"
                            :key="key"
                            :index="val2.path">
                            <span class="third_title">{{val2.name}}</span></el-menu-item>
            </el-submenu>
            <el-menu-item v-else
                          :index="val.path">
                          <span class="second_title_alone">{{val.name}}</span>
                          </el-menu-item>
          </div>
        </el-submenu>
        <el-menu-item :index="item.path"
                      v-else>
          <!-- <i class="el-icon-menu"></i> -->
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import modules from "@/router/module";
export default {
  data () {
    return {
      isCollapse: false,
      list: [],
      default_active: "",
      default_array: [],
      screenHeight:''
    };
  },
  mounted () {
    let path = this.$route.path.split("/");
    if (path.length > 2) {
      this.default_array = path.slice(1, path.length - 1);
    }
    this.default_active = path.slice(path.length - 1, path.length)[0];
    this.list = modules;
    this.screenHeight = (document.documentElement.clientHeight - 62) + 'px'
    window.addEventListener('resize',() => {
      this.screenHeight = (document.documentElement.clientHeight - 62) + 'px'
    })
  },
  props: ['newRoute'],
  components: {},
  computed: {},
  methods: {
    // 路由展开时触发
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    // 路由收起时触发
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击路由后跳转
    handleSelect (key, keyPath) {
      console.log(key, keyPath);
      let route = {};
      for (var i in this.list) {
        if (this.filterRoute(this.list[i], key)) {
          route.name = this.filterRoute(this.list[i], key);
          break;
        }
      }

      let path = "";
      for (var idx in keyPath) {
        path += "/" + keyPath[idx];
      }
      route.path = path;
      this.$emit("getNewRoute", route);
      this.$router.push(path);
    },
    // 筛选出选中路由的名称
    filterRoute (data, key) {
      for (var name in data) {
        if ("children" in data) {
          return this.filterRoute(data.children, key);
        } else {
          if (
            Object.prototype.toString.call(data) === "[object Object]" &&
            name === "path" &&
            data[name] === key
          ) {
            return data["name"];
          } else if (Array.isArray(data)) {
            let name = "";
            for (var i in data) {
              if (data[i].path === key) {
                name = data[i].name;
                break;
              }
              if ('children' in data[i]) {
                if (this.filterRoute(data[i].children, key)) {
                  name = this.filterRoute(data[i].children, key);
                  break;
                }
              }
            }
            return name;
          }
        }
      }
    }
  },
  watch: {
    newRoute (val) {
      this.default_active = val.route;
      this.default_array = val.path;
    }
  }
};
</script>
<style lang='scss'>
.aside {
  .aside_content {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .aside_content:not(.el-menu--collapse) {
    width: 200px;
  }
  .first_title {
    display: inline-block;
    width: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .second_title,
  .second_title_alone {
    display: inline-block;
    width: 100%;
    padding-left: 17%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

  }
  .second_title_alone {
    padding-left: 30% !important;
  }
  .third_title{
    display: inline-block;
    width: 100%;
    margin-right: -20px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

  }
}
</style>